<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
        <el-tab-pane  label="详细数据" name="finance_stock_data">
            <finance-stock-data 
            v-if="activeName ==='finance_stock_data'"></finance-stock-data>
        </el-tab-pane>

        <el-tab-pane  label="营业总收入" name="total_operating_revenue">
            <profit-stacked-echart 
            activeProperty="totalOperatingRevenue"
            v-if="activeName ==='total_operating_revenue'"></profit-stacked-echart>
        </el-tab-pane>

        <el-tab-pane  label="销售商品、提供劳务收到的现金" name="goods_sale_and_service_render_cash">
            <profit-stacked-echart 
            activeProperty="goodsSaleAndServiceRenderCash"
            v-if="activeName ==='goods_sale_and_service_render_cash'"></profit-stacked-echart>
        </el-tab-pane>

        <el-tab-pane  label="扣非净利润" name="profit_stacked_echart">
            <profit-stacked-echart 
            activeProperty="adjustedProfit"
            v-if="activeName ==='profit_stacked_echart'"></profit-stacked-echart>
        </el-tab-pane>

        <el-tab-pane  label="经营活动产生的现金流量净额" name="net_operate_cash_flow">
            <profit-stacked-echart 
            activeProperty="netOperateCashFlow"
            v-if="activeName ==='net_operate_cash_flow'"></profit-stacked-echart>
        </el-tab-pane>

        <el-tab-pane  label="ROE" name="roe_echart">
            <r-o-e-base-bar-echart v-if="activeName ==='roe_echart'"></r-o-e-base-bar-echart>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import ProfitStackedEchart from './ProfitStackedEchart.vue';
import ROEBaseBarEchart from './ROEBaseBarEchart.vue';
import FinanceStockData from './FinanceStockData.vue';

export default {
    components: {
        ProfitStackedEchart,
        ROEBaseBarEchart,
        FinanceStockData
    },
    setup() {
        const activeNameKey = "FinanceStatActiveName"
        const activeName = ref(sessionStorage.getItem(activeNameKey) || 'profit_stacked_echart')

        const change = (tabName) => {
            sessionStorage.setItem(activeNameKey, tabName)
        }

        return { activeName, change}
    }
}
</script>